<template>
  <div class="header">
    <div class="header-left">
      <el-icon :size="24" class="collapse-icon" @click="collapse">
        <component :is="themeConfig.isCollapse ? 'expand' : 'fold'"></component>
      </el-icon>
      <el-breadcrumb class="breadcrumb" separator-icon="ArrowRight">
        <transition-group name="breadcrumb">
          <el-breadcrumb-item
            :to="item.path"
            v-for="item in breadcrumbList"
            :key="item.path"
          >
            <div class="inner-item">
              <el-icon>
                <component :is="item.meta.icon"></component>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </div>
          </el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <el-dropdown trigger="click" @command="handleI18n">
        <i class="iconfont icon-zhongyingwen"></i>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :disabled="language && language === 'zh'"
              command="zh"
              >简体中文</el-dropdown-item
            >
            <el-dropdown-item :disabled="language === 'en'" command="en"
              >English</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <i class="iconfont icon-sousuo"></i>
      <i class="iconfont icon-lingdang"></i>
      <i class="iconfont icon-jingzi" @click="drawer = true"></i>
      <i
        :class="[
          'iconfont',
          isFullscreen ? 'icon-cancel-full-screen' : 'icon-full-screen',
        ]"
        @click="toggle"
      ></i>
      <span>{{ userInfo.username }}</span>
      <el-dropdown trigger="click">
        <el-avatar
          class="avatar"
          icon="UserFilled"
          fit="cover"
          :size="40"
          :src="userInfo.avatar"
        />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="loginOut">
              <el-icon>
                <SwitchButton></SwitchButton>
              </el-icon>
              <span>{{ $t("header.logout") }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <el-drawer v-model="drawer">
      <el-button type="info" @click="changeLayout('column')">纵向</el-button>
      <el-button type="info" @click="changeLayout('row')">横向</el-button>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { ElMessageBox } from "element-plus";
import { useFullscreen, useDebounceFn } from "@vueuse/core";
import { getBrowserLang } from "@/utils/utils";
import { useI18n } from "vue-i18n";
import { GlobalStore } from "@/stores";
import { MenuStore } from "@/stores/modules/menu";
import { LayoutType } from "@/stores/interface";
import { useRoute, useRouter } from "vue-router";
import { LOGIN_URL } from "@/config/config";

const { toggle, isFullscreen } = useFullscreen();
const i18n = useI18n();
const drawer = ref(false);
const route = useRoute();
const router = useRouter();
const globalStore = GlobalStore();
const menuStore = MenuStore();
const language = computed((): string => globalStore.language);
const themeConfig = computed(() => globalStore.themeConfig);
const userInfo = computed(() => globalStore.userInfo);
const breadcrumbList = computed(
  () =>
    menuStore.breadcrumbList[route.matched[route.matched.length - 1].path] ?? []
);
const screenWidth = ref(0);

onMounted(() => {
  handleI18n(language.value || getBrowserLang());
  window.addEventListener("resize", lintenWindow, false);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", lintenWindow);
});

// 监听视图大小，折叠菜单
const lintenWindow = useDebounceFn(() => {
  screenWidth.value = document.body.clientWidth;
  if (!themeConfig.value.isCollapse && screenWidth.value < 1300)
    globalStore.setThemeConfig({ ...themeConfig.value, isCollapse: true });
  if (themeConfig.value.isCollapse && screenWidth.value > 1300)
    globalStore.setThemeConfig({ ...themeConfig.value, isCollapse: false });
});

// 折叠菜单
const collapse = () => {
  globalStore.setThemeConfig({
    ...themeConfig.value,
    isCollapse: !themeConfig.value.isCollapse,
  });
};

// 切换语言
const handleI18n = (lang: string) => {
  i18n.locale.value = lang;
  globalStore.updateLanguage(lang);
};

// 主题设置
const changeLayout = (val: LayoutType) => {
  globalStore.setThemeConfig({ ...themeConfig.value, layout: val });
};

// 退出登录
const loginOut = () => {
  ElMessageBox.confirm("是否确认退出登录", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      globalStore.setToken("");
      router.replace(LOGIN_URL);
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
